import { FC } from "react";
import { ChartPropsType } from "./interface";
import {
  Cell,
  Legend,
  Pie,
  PieChart,
  ResponsiveContainer,
  Tooltip,
} from "recharts";
import { COLORS } from "@/constant";

const ChartComponent: FC<ChartPropsType> = (props: ChartPropsType) => {
  const { stat } = props;
  const data = stat.map((item) => ({
    name: item.name,
    value: item.count,
  }));
  return (
    <div style={{ width: "300px", height: "300px" }}>
      <ResponsiveContainer width="100%" height="100%">
        <PieChart>
          <Pie
            data={data}
            dataKey="value"
            nameKey="name"
            cx="50%"
            cy="50%"
            fill="#8884d8"
            label={({ name, percent, value }) =>
              `${name}: ${value} (${((percent as number) * 100).toFixed(1)}%)`
            }
            labelLine={false}
          >
            {data.map((entry, index) => (
              <Cell
                key={`cell-${entry.name}`}
                fill={COLORS[index % COLORS.length]}
              />
            ))}
          </Pie>

          <Tooltip
            formatter={(value, name) => [`${value} 票`, name]}
            labelFormatter={() => ""}
          />

          <Legend />
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
};

export default ChartComponent;
